<template>
  <div class="ticket-assign">
    <el-card>
      <template #header>
        <h3>👥 工单分配管理</h3>
      </template>
      
      <div class="assign-content">
        <div class="stats">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-number">{{ stats.pending }}</div>
                <div class="stat-label">待分配工单</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-number">{{ stats.progress }}</div>
                <div class="stat-label">进行中工单</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-number">{{ stats.completed }}</div>
                <div class="stat-label">已完成工单</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-number">{{ developers.length }}</div>
                <div class="stat-label">可用开发者</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <div class="section">
          <h4>📋 待分配工单列表</h4>
          <el-table :data="pendingTickets" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="projectName" label="项目名称" min-width="150" />
            <el-table-column prop="priority" label="优先级" width="100">
              <template #default="{ row }">
                <el-tag :type="getPriorityType(row.priority)" size="small">
                  {{ getPriorityText(row.priority) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="分配给" width="200">
              <template #default="{ row }">
                <el-select 
                  v-model="row.selectedDeveloper" 
                  placeholder="选择开发者"
                  @change="handleAssign(row)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="dev in developers"
                    :key="dev.id"
                    :label="`${dev.name} (${dev.workload}个工单)`"
                    :value="dev.id"
                  />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import { ElMessage } from "element-plus"

const loading = ref(false)

const stats = reactive({
  pending: 3,
  progress: 5,
  completed: 12
})

const developers = ref([
  { id: 1, name: "张三", workload: 2 },
  { id: 2, name: "李四", workload: 3 },
  { id: 3, name: "王五", workload: 1 },
  { id: 4, name: "赵六", workload: 4 },
  { id: 5, name: "钱七", workload: 0 }
])

const pendingTickets = ref([
  { id: 1, projectName: "电商管理系统", priority: "high", selectedDeveloper: null },
  { id: 4, projectName: "在线教育平台", priority: "medium", selectedDeveloper: null },
  { id: 5, projectName: "物流管理系统", priority: "urgent", selectedDeveloper: null }
])

const getPriorityText = (priority) => {
  const map = { low: "🟢 低", medium: "🟡 中", high: "🔴 高", urgent: "🚨 紧急" }
  return map[priority] || priority
}

const getPriorityType = (priority) => {
  const map = { low: "", medium: "warning", high: "danger", urgent: "danger" }
  return map[priority] || ""
}

const handleAssign = (ticket) => {
  const developer = developers.value.find(dev => dev.id === ticket.selectedDeveloper)
  if (developer) {
    ElMessage.success(`工单 "${ticket.projectName}" 已分配给 ${developer.name}`)
    developer.workload++
    const index = pendingTickets.value.findIndex(t => t.id === ticket.id)
    if (index > -1) {
      pendingTickets.value.splice(index, 1)
      stats.pending--
      stats.progress++
    }
  }
}

onMounted(() => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
})
</script>

<style scoped>
.stats { margin-bottom: 30px; }
.stat-card { text-align: center; }
.stat-number { font-size: 32px; font-weight: bold; color: #409EFF; margin-bottom: 8px; }
.stat-label { color: #909399; font-size: 14px; }
.section { margin: 30px 0; }
.section h4 { margin-bottom: 15px; color: #303133; }
</style>
